<template>
  <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
    <el-table-column type="index" label="序号" width="50" />
    <el-table-column
      prop="title"
      :label="`${labelName}名称`"
      show-overflow-tooltip
    ></el-table-column>
    <el-table-column prop="status" label="状态" show-overflow-tooltip>
      <template #default="scope">
        <el-tag type="success" v-if="scope.row.status">启用</el-tag>
        <el-tag type="info" v-else>禁用</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="desc" label="描述" show-overflow-tooltip></el-table-column>
    <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
    <el-table-column label="操作" width="150">
      <template #default="scope">
        <el-button size="small" text type="primary" @click="onOpenEditDic('edit', scope.row)"
          >修改</el-button
        >
        <el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="system-add">
    <el-button size="default" type="success" class="ml10" @click="onOpenAddDic('add')">
      <i-ep-plus /> 新增
    </el-button>
    <div class="system-num">合计：{{ state.tableData.total }} 条数据</div>
  </div>
  <DicDialog ref="dicDialogRef" @refresh="getTableData()" />
</template>

<script setup>
import { defineAsyncComponent, reactive, onMounted, ref, computed } from 'vue'

// 引入组件
const DicDialog = defineAsyncComponent(() => import('@/views/manage/settingCard/dialog.vue'))

const props = defineProps({
  setting: {
    type: String,
    default: 'model',
    required: true
  }
})

const labelName = computed(() => {
  if (props.setting === 'pack') return '包装'
  else if (props.setting === 'warehouse') return '仓库'
  return '规格'
})
// console.log(props.setting, '----data')
// 定义变量内容
const dicDialogRef = ref()
const state = reactive({
  tableData: {
    data: [],
    total: 0,
    loading: false
  }
})

// 初始化表格数据
const getTableData = () => {
  state.tableData.loading = true
  const data = [
    {
      id: '1',
      type: 'model',
      title: '240ML',
      status: 1,
      desc: '一瓶竹香酒的规格',
      createTime: '2016-05-03'
    },
    {
      id: '2',
      type: 'model',
      title: '480ML',
      status: 1,
      desc: '一瓶竹香酒的规格',
      createTime: '2016-05-02'
    },
    {
      id: '3',
      type: 'model',
      title: '26CM',
      status: 1,
      desc: '筷子的规格',
      createTime: '2016-05-04'
    },
    {
      id: '4',
      type: 'model',
      title: '33CM',
      status: 1,
      desc: '筷子的规格',
      createTime: '2016-05-01'
    },
    {
      id: '5',
      type: 'pack',
      title: '6瓶/箱',
      status: 1,
      desc: '竹香酒整件的包装规格',
      createTime: '2016-05-03'
    },
    {
      id: '6',
      type: 'pack',
      title: '15瓶/箱',
      status: 1,
      desc: '竹香酒整件的包装规格',
      createTime: '2016-05-02'
    },
    {
      id: '7',
      type: 'pack',
      title: '2双装',
      status: 1,
      desc: '筷子的盒装规格',
      createTime: '2016-05-04'
    },
    {
      id: '8',
      type: 'pack',
      title: '10双装',
      status: 1,
      desc: '筷子的盒装规格',
      createTime: '2016-05-01'
    },
    {
      id: '9',
      type: 'house',
      title: '齐安仓库',
      status: 1,
      desc: '旧厂仓库',
      createTime: '2016-05-03'
    },
    {
      id: '10',
      type: 'house',
      title: '福湾2号楼仓库',
      status: 1,
      desc: '在2号楼的楼梯间',
      createTime: '2016-05-02'
    },
    {
      id: '11',
      type: 'house',
      title: '福湾1号楼仓库',
      status: 1,
      desc: '在1号楼的楼梯间',
      createTime: '2016-05-04'
    },
    {
      id: '12',
      type: 'house',
      title: '福湾冰箱仓库',
      status: 1,
      desc: '办公室的冰箱那间',
      createTime: '2016-05-01'
    }
  ]
  state.tableData.data = data.filter((item) => {
    const arr = []
    if (item.type === props.setting) {
      console.log(item.type, props.setting)
      arr.push[item]
    }
    return arr
  })
  state.tableData.total = state.tableData.data.length
  setTimeout(() => {
    state.tableData.loading = false
  }, 500)
}
// 打开新增字典弹窗
const onOpenAddDic = (type) => {
  dicDialogRef.value.openDialog(type)
}
// 打开修改字典弹窗
const onOpenEditDic = (type, row) => {
  dicDialogRef.value.openDialog(type, row)
}
// 删除字典
const onRowDel = (row) => {
  ElMessageBox.confirm(`确定要删除：“${row.title}”吗，是否继续?`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      getTableData()
      ElMessage.success('删除成功')
    })
    .catch(() => {})
}
// 页面加载时
onMounted(() => {
  getTableData()
})
</script>

<style lang="scss" scoped>
::v-deep(.el-table__cell) {
  text-align: center;
}
.system-add {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
</style>
